Skip to content

fix(css): apply server.origin to public file urls in CSS (fix #18457)#21697

Open
SalvatoreT wants to merge 1 commit intovitejs:mainfrom
SalvatoreT:salvatoret/18457/css-config-server-origin
Open

fix(css): apply server.origin to public file urls in CSS (fix #18457)#21697
SalvatoreT wants to merge 1 commit intovitejs:mainfrom
SalvatoreT:salvatoret/18457/css-config-server-origin

Conversation

@SalvatoreT
Copy link

Fixes #18457

Vite's CSS plugin rewrites url() references during dev by resolving them to absolute URLs with the dev server's origin hardcoded. The server.origin config exists but is only applied in some code paths (module assets in templates and JS imports) but not in others (CSS url() rewriting path).

Similar to @kajic on #18457, I have a base for creating the HTML and a different one for the Vite server.

This has turned out to be a problem for me because I serve HTML generated by a Vite SSR server from a server in front of the Vite dev server. In short, a server at http://127.0.0.1:8000/ requests HTML from Vite running at http://127.0.0.1:5173/, and the fronting server returns the HTML it got from Vite to the browser. At this point, all URLs in the HTML are relative to http://127.0.0.1:8000/, instead of being relative to http://127.0.0.1:5173/, so all static assets on the page fail to load.

This change just lest the server.origin also get applied to the CSS files too.


  • Read the Contributing Guidelines at https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md.
  • Check that there isn't already a PR that solves the problem the same way. If you find a duplicate, please help us review it.
  • Update the corresponding documentation if needed.
  • Include relevant tests that fail without this PR but pass with it. If the tests are not included, explain why.

…18457)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@SalvatoreT SalvatoreT force-pushed the salvatoret/18457/css-config-server-origin branch from 9f768c5 to 1068e87 Compare February 25, 2026 19:01
@SalvatoreT
Copy link
Author

The CI failure looks unrelated to my change.

https://github.com/vitejs/vite/actions/runs/22411489370/job/64885922055?pr=21697#step:3:13

ERR_PNPM_FETCH_403  GET https://registry.npmjs.org/pnpm: Forbidden - 403

Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The both tests added passes even if I reverted the changes in css.ts. Would you change the test so that it covers the fix?

@sapphi-red sapphi-red added the p2-edge-case Bug, but has workaround or limited in scope (priority) label Feb 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

p2-edge-case Bug, but has workaround or limited in scope (priority)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support server.origin for references in HTML files

2 participants